<template>
  <xy-page>
    <xy-search>
      <el-form>
        <el-form-item>
          <el-input class="chanlNum" placeholder="频道号" v-model="chanlNum" clearable oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
          <el-date-picker
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="-"
            v-model="dateTime"
            @change="betweenDays"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="right">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button plain @click="resetForm">重置条件</el-button>
      </div>
    </xy-search>
    <el-tabs v-model="activeTab" @tab-click="getTabData">
      <el-tab-pane label="答题卡" name="答题卡">
        <xy-table :tableData="cardTabledata" :loading="cardTabledata.isLoading" @change="getCardData" :noEmpty="!cardTabledata.list">
          <el-table-column prop="createdTime" label="日期" align="center"></el-table-column>
          <el-table-column prop="questType" label="类型" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getCurCardDetail(scope.row)">查看结果</el-button>
              <el-button type="text" @click="cardRecord(scope.row)">下载</el-button>
              <el-button type="text" @click="delCard(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </xy-table>
        <el-dialog
        :visible.sync="resDialog" class="resDialog">
          <div>【{{resType}}】{{title}}</div>
          <div class="questType" v-for="item in choices" :key="item.option">
            <div>{{item.option}}<span>{{item.percent}}</span></div>
          </div>
          <div v-show="itemType==1">提交人数：{{total}}人</div>
          <div v-show="itemType==0">答对人数：{{people}}人</div>
          <el-button type="primary" @click="resDialog = false">确定</el-button>
        </el-dialog>
        <div style="position:relative;top:-130px;text-align:center;" v-show="noData">暂无数据</div>
      </el-tab-pane>
      <el-tab-pane label="签到" name="签到">
        <xy-table :tableData="signTabledata" :loading="signTabledata.isLoading" @change="getSignData" :noEmpty="!signTabledata.list">
          <el-table-column prop="checkinTime" label="最新签到时间" align="center"></el-table-column>
          <el-table-column prop="number" label="在线人数" align="center"></el-table-column>
          <el-table-column prop="checkNumber" label="签到人数" align="center"></el-table-column>
          <el-table-column prop="percent" label="签到率" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getCurSignDetail(scope.row)">查看详情</el-button>
              <el-button type="text" @click="signRecord(scope.row)">导出记录</el-button>
            </template>
          </el-table-column>
        </xy-table>
        <el-dialog
        :visible.sync="isDialog">
          <xy-table :tableData="detailTableData" :loading="detailTableData.isLoading" @change="getDetailList" :noEmpty="!detailTableData.list">
            <el-table-column label="用户ID" prop="userId" align="center"></el-table-column>
            <el-table-column label="用户昵称" prop="nickname" align="center"></el-table-column>
            <el-table-column label="签到状态" align="center">
              <template slot-scope="scope">{{scope.row.checked=='N'?'未签到':'已签到'}}</template>
            </el-table-column>
          </xy-table>
        </el-dialog>
        <div style="position:relative;top:-130px;text-align:center;" v-show="noData">暂无数据</div>
      </el-tab-pane>
      <el-tab-pane label="中奖记录" name="中奖记录">
        <el-button type="success" style="margin-bottom:10px;" @click="loadPrizeData">导出数据</el-button>
        <xy-table :tableData="prizeData" :loading="prizeData.isLoading" @change="getPrizeData" :noEmpty="!prizeData.list">
          <el-table-column label="中奖时间" prop="createdTime" align="center" min-width="120"></el-table-column>
          <el-table-column label="用户ID" prop="viewerId" align="center" min-width="90"></el-table-column>
          <el-table-column label="用户昵称" prop="viewerName" align="center"></el-table-column>
          <el-table-column label="用户姓名" prop="name" align="center"></el-table-column>
          <el-table-column label="手机号码" prop="telephone" align="center" min-width="70"></el-table-column>
          <el-table-column label="中奖码" prop="winnerCode" align="center"></el-table-column>
          <el-table-column label="中奖礼品" prop="prize" align="center"></el-table-column>
        </xy-table>
        <div style="position:relative;top:-130px;text-align:center;" v-show="noData">暂无数据</div>
      </el-tab-pane>
    </el-tabs>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      curDetailTime:'',
      appId:'',
      noData:true,
      prizeData:{
        total:0,
        size:20,
        page:1,
        isLoading:false,
        list:[]
      },
      pickerOptions: this.$utils.disabledDate(),
      sessionKey:'',
      signOldPage:'',
      curRowCheckinId:'',
      choices:[{option:'',percent:''}],
      people:'',
      total:'',
      resType:'',
      itemType:'',
      title:'',
      resDialog:false,
      detailTableData:{
        total:0,
        page:1,
        size:20,
        isLoading:false,
        list:[

        ]
      },
      isDialog:false,
      signDownloaded:false,
      prizeDownloaded:false,
      cardDownloaded:false,
      oldChanlNum:'',
      dateTime: "",
      oldDateTime:'',
      chanlNum:'',
      activeTab: "答题卡",
      cardTabledata: {
        size:20,
        page:1,
        isLoading:false,
        total:0,
        list: []
      },
      signTabledata: {
        size:20,
        page:1,
        number:0,
        isLoading:false,
        total:0,
        list: []
      }
    };
  },
  methods: {
    betweenDays(){
      if(!this.dateTime)return
      if(this.$utils.betweenDays(this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'))>30){
        this.$message.error('时间跨度不能超过30天')
        this.dateTime = []
      }
    },
    loadPrizeData(){
      if(!this.prizeData.list.length){
        this.$message.error('当前无数据')
        return
      }
      this.$utils.linkTo(
        this.$utils.getUrl('/admin/instance/ccb/polyv/channel/view/channelLotteryListdown.do',{
          appId:this.appId,
          channelId:this.chanlNum,
          end:this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),
          limit:10000,
          page:1,
          start:this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'),
          'session-key':this.sessionKey
        })
      )
    },
    delCard(row){
      this.$confirm('删除后无法恢复, 是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$postStream('/admin/instance/ccb/polyv/channel/view/channelQuestionDelete.do',{
          data:{
            appId:this.appId,
            channelId:this.chanlNum,
            questionId:row.questionId,
            times:row.times
          },
          success:(res)=>{
            if(res.success){
              this.$message.success('删除成功')
              this.search()
            }else{
              if(res.code == 50001){
                this.$message.error(res.message)
              }else{
                this.$message.error('删除失败')
              }
            }
          },
          error:()=>{
            this.$message.error('删除失败')
          }
        })
      })
    },
    getCurCardDetail(row){
      if(!this.dateTime)return
      if(this.dateTime != this.oldDateTime)return
      this.resDialog = true
      this.$postStream('/admin/instance/ccb/polyv/channel/view/channelQuestionDetail.do',{
        data:{
          appId:this.appId,
          channelId: this.chanlNum,
          endDate: this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),
          questionId:row.questionId,
          startDate: this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'),
          times:row.times
        },
        success:(res)=>{
          if(res.success){
            if(res.object.type=='R'){
              this.resType = '单选'
            }else if(res.object.type=='C'){
              this.resType = '多选'
            }else if(res.object.type=='S'){
              this.resType = '评分'
            }else if(res.object.type=='Q'){
              this.resType = '问答'
            }
            this.title = res.object.title
            this.choices = res.object.question
            this.people = res.object.correctRecord
            this.total = res.object.total
            this.itemType = res.object.itemType
            for(let i=0;i<this.choices.length;i++){

              if(res.object.total==0){
                this.choices[i].percent = '0%'
              }else{
                this.choices[i].percent = parseInt(this.choices[i].count/res.object.total*100)+'%'
              }
            }
          }else{
            this.$message.error('结果获取失败')
          }
        },
        error:()=>{
          this.$message.error('结果获取失败')
        }
      })
    },
    getTabData(page){
      if((typeof page) == 'number'){
        this.signDownloaded = false
        this.prizeDownloaded = false
        this.logsDownloaded = false
      }else{
        page = 1
      }
      if(this.oldChanlNum && this.oldDateTime){
        if(this.activeTab == '签到'){
          if(this.signDownloaded == true)return
          this.getSignData()
        }else if(this.activeTab == '中奖记录'){
          if(this.prizeDownloaded == true)return
          this.getPrizeData()
        }else if(this.activeTab == '答题卡'){
          if(this.cardDownloaded == true)return
          this.getCardData()
        }
      }
    },
    getSignData(page){
      this.signTabledata.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/view/checkinStatsList.do',{
        data:{
          appId:this.appId,
          channelId: this.oldChanlNum,
          endDate:this.$utils.formatDate(this.oldDateTime[1],'yyyy-MM-dd'),
          page:page || this.signTabledata.page,
          pageSize:this.signTabledata.size,
          startDate:this.$utils.formatDate(this.oldDateTime[0],'yyyy-MM-dd')
        },
        success:(res)=>{
          this.signTabledata.number = 0
          if(res.success){
            this.signTabledata.page = page || this.signTabledata.page
            sessionStorage.setItem('dataChannelId',this.chanlNum)
            this.signTabledata.total = res.object.count
            this.signTabledata.isLoading = false
            this.signDownloaded = true
            this.signTabledata.list = res.object.list
            if(this.signTabledata.list.length){
              for(let i=0;i<this.signTabledata.list.length;i++){
                this.signTabledata.list[i].percent = parseInt((this.signTabledata.list[i].checkNumber/this.signTabledata.list[i].number)*100)+'%'
              }
            }
          }else{
            this.$message.error('签到列表获取失败')
          }
        },
        error:()=>{
          this.$message.error('签到列表获取失败')
        },
        complete: (res)=> {
          this.signTabledata.isLoading = false
          if(res.code==-2){
            this.$message.error('频道不存在')
          }
        }
      })
    },
    getPrizeData(page){
      this.prizeData.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/view/channelLotteryList.do',{
        data:{
          appId:this.appId,
          channelId: this.oldChanlNum,
          end:this.$utils.formatDate(this.oldDateTime[1],'yyyy-MM-dd'),
          page:page || this.prizeData.page,
          limit:this.prizeData.size,
          start: this.$utils.formatDate(this.oldDateTime[0],'yyyy-MM-dd')
        },
        success:(res)=>{
          if(res.success){
            this.prizeData.page = page || this.prizeData.page
            sessionStorage.setItem('dataChannelId',this.chanlNum)
            this.prizeData.total = res.object.totalItems
            this.prizeData.isLoading = false
            this.prizeDownloaded = true
            this.prizeData.list = res.object.contents
            if(this.prizeData.list){
              for(let i=0;i<this.prizeData.list.length;i++){
                this.prizeData.list[i].createdTime = this.$utils.formatDate(Number(this.prizeData.list[i].createdTime))
              }
            }
          }else{
            this.$message.error('中奖记录获取失败')
          }
        },
        error:()=>{
          this.$message.error('中奖记录获取失败')
        },
        complete:(res)=>{
          this.prizeData.isLoading = false
          if(res.code==-2){
            this.$message.error('频道不存在')
          }
        }
      })
    },
    search() {
      this.noData = false
      this.oldChanlNum = this.chanlNum
      this.oldDateTime = this.dateTime
      this.signDownloaded = false
      this.prizeDownloaded = false
      this.cardDownloaded = false
      if(!this.chanlNum){
        this.$message.error('频道号不能为空')
        return
      }
      if(!this.dateTime){
        this.$message.error('查询时间不能为空')
        return
      }
      if(this.activeTab == '答题卡'){
        this.getCardData()
      }else if(this.activeTab == '签到'){
        this.getSignData()
      }else if(this.activeTab == '中奖记录'){
        this.getPrizeData()
      }
    },
    //答题卡列表
    getCardData(page){
      this.cardTabledata.isLoading = true
      this.$postStream("/admin/instance/ccb/polyv/channel/view/channelQuestionList.do", {
        data:{
          appId:sessionStorage.getItem('curAccountAppId'),
          channelId:this.chanlNum,
          startDate:this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'),
          endDate:this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),
          page:page || this.cardTabledata.page,
          pageSize:this.cardTabledata.size
        },
        success: (res) => {
          if(res.success){
            if(res.object.contents.length == 0 && (page || this.cardTabledata.page) != 1){
              this.cardTabledata.page = 1
              this.getCardData()
              return
            }
            this.cardTabledata.page = page || this.cardTabledata.page
            this.cardDownloaded = true
            sessionStorage.setItem('dataChannelId',this.chanlNum) 
            this.cardTabledata.list = res.object.contents
            this.cardTabledata.total = res.object.totalItems
            if(this.cardTabledata.list){
              for(let i=0;i<this.cardTabledata.list.length;i++){
                this.cardTabledata.list[i].createdTime = this.$utils.formatDate(Number(this.cardTabledata.list[i].createdTime))
                if(this.cardTabledata.list[i].type=='R'){
                  this.cardTabledata.list[i].questType = '单选'
                }else if(this.cardTabledata.list[i].type=='C'){
                  this.cardTabledata.list[i].questType = '多选'
                }else if(this.cardTabledata.list[i].type=='S'){
                  this.cardTabledata.list[i].questType = '评分'
                }else if(this.cardTabledata.list[i].type=='Q'){
                  this.cardTabledata.list[i].questType = '问答'
                }
              }
            }
          }else{
            this.$message.error('答题卡获取失败')
          }
        },
        error:()=>{
          this.$message.error('答题卡获取失败')
        },
        complete: (res) => {
          this.cardTabledata.isLoading = false
          if(res.code==-2){
            this.$message.error('频道不存在')
          }
        }
      });
    },
    cardRecord(row) {
      this.$utils.linkTo(
        this.$utils.getUrl('/admin/instance/ccb/polyv/channel/answerRecords/export.do',{
          channelId:this.chanlNum,
          appId:this.appId,
          questionId:row.questionId,
          'session-key':this.sessionKey,
          times:row.times
        })
      )
    },
    signRecord(row) {
      this.$utils.linkTo(
        this.$utils.getUrl('/admin/instance/ccb/polyv/channel/checkinStats/export.do',{
          appId:sessionStorage.getItem('curAccountAppId'),
          channelId:this.chanlNum,
          checkinId:row.checkinId,
          page:1,
          pageSize:10,
          'session-key':this.sessionKey,
          cutoffTime:row.createTime
        })
      )
    },
    resetForm(){
      this.chanlNum = "",
      this.dateTime = ""
    },
    getCurSignDetail(row){
      this.isDialog = true
      this.curRowCheckinId = row.checkinId
      this.curDetailTime = row.createTime
      this.getDetailList()
    },
    getDetailList(page){
      this.detailTableData.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/view/checkinStatsDetail.do',{
        data:{
            appId:this.appId,
            channelId: this.chanlNum,
            checkinId: this.curRowCheckinId,
            page: page||this.detailTableData.page,
            pageSize: this.detailTableData.size,
            cutoffTime:this.curDetailTime
        },
        success:(res)=>{
          if(res.success){
            this.detailTableData.list = res.object.list
            this.detailTableData.total = res.object.count
            this.detailTableData.page = page||this.detailTableData.page
            if(res.object.list){
              for(let i=0;i<this.detailTableData.list.length;i++){
                if(!this.detailTableData.list[i].checkNumber){
                  this.detailTableData.list[i].checkNumber = 0
                }
                if(this.detailTableData.list[i].checkNumber == 0){
                  this.detailTableData.list[i].percent = '-'
                }else{
                  this.detailTableData.list[i].percent = parseInt(this.detailTableData.list[i].checkNumber/this.detailTableData.list[i].number*100)+'%'
                }
              }
            }
          }else{
            this.$message.error('详情获取失败')
          }
        },
        error:()=>{
          this.$message.error('详情获取失败')
        },
        complete:()=>{
          this.detailTableData.isLoading = false
        }
      })
    }
  },
  mounted(){
    this.appId = sessionStorage.getItem('curAccountAppId')
    this.sessionKey = JSON.parse(sessionStorage.getItem('UserInfo')).sessionKey
    this.dateTime = [new Date(),new Date()]
    this.chanlNum = sessionStorage.getItem('dataChannelId')
    if(this.chanlNum){
      this.search()
    }
  }
};
</script>

<style lang="scss" scoped>
.chanlNum {
  width: 20%;
}
.resDialog{
  text-align:center;
  div{
    margin:5px auto;
  }
  div:nth-of-type(1){
    text-align: left;
    width:300px;
 }
}
.questType{
  div:nth-of-type(1){
    background:rgba(0,255,0,0.5);
    width:300px;
    border-radius: 10px;
    text-align: left;
    padding-left:10px;
    span{
      float:right;
      position:relative;
      right: -15%;
    }
  }
  div:nth-of-type(2){
    text-align: left;
    background:#d5ded580;
    width:300px;
    border-radius: 10px;
    padding-left:10px;
 }
}
</style>
